<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1a5a5a5/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, user-scalable=no, maximum-scale=1,width=device-width">
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<title></title>
<link rel="icon" type="images/png" href="" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<!-- 功能样式 -->
<link type="text/css" rel="stylesheet"  href="css/style.css"/><!-- 公用样式 -->
<link type="text/css" rel="stylesheet"  href="css/index.css"/><!-- 首页样式 -->

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><!-- 公用 -->
<script type="text/javascript" src="js/jquery.touchSlider.js"></script><!-- banner -->
<!-- 功能样式 -->

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>

<body>
<!-- 搜索 -->
<div id="search" class="clearfix">
	<a class="prev fl" href="javascript:history.go(-1);" title="后退">&lt;</a>
	<div class="head fl">商品详情</div>
</div>
<!-- 搜索 -->
<style>
.switchCont form{ width:94%; overflow:hidden; margin:15px 3%; border:1px dashed #eee; font-size:14px;}
.switchCont form label{ width:20%; color:#999; line-height:30px; padding-left:2%;}
.switchCont form input.text{ width:50%; color:#999;line-height:30px;}
.switchCont form input.submit{ width:17%; height:30px; line-height:30px; background:#e1252c; color:#fff; font-size:12px;}


#Popup{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;}
#PopupBg{ width:100%; height:100%; background:rgba(0,0,0,0.75);}
#PopupCt{ position:absolute; top:50%; left:50%; width:280px; height:110px; padding:20px; text-align:left; background:#fff; border-radius:15px; margin:-75px 0 0 -160px;}
#PopupCt .close{ position:absolute; top:10px; right:10px; width:20px; height:20px; background:#666;}
#PopupCt .CtText2{ display:block; font-size:14px; line-height:25px; color:#3b3b3b; text-align:left;}
#PopupCt .CtText{ display:block; width:258px; font-size:14px; color:#3b3b3b; text-align:left; line-height:30px; border:1px solid #999; padding:2px 10px; margin:10px 0;}
#PopupCt .submit{ float:right; background:#e1252c; padding:5px 10px; font-size:12px; color:#fff; text-align:center; line-height:100%;}
</style>
<!-- 内容切换 -->
<div id="switch">
    <div class="proCont">
    	<!-- 内容 -->
        <div class="main_visual clearfix" style="height:240px;">
            <div class="main_image">
                <ul>
                    <li><a style="background:url(uploadfile/1394415508290057627.jpg) center top no-repeat; height:400px;"></a></li>
                    <li><a style="background:url(uploadfile/img.jpg) center top no-repeat"></a></li>
                </ul>
            </div>
            <div class="flicking_con">
                <a href="#">1</a>
                <a href="#">2</a>
            </div>
            <a href="javascript:;" id="btn_prev"></a>
            <a href="javascript:;" id="btn_next"></a>
        </div>
        <!-- 内容 -->
        <h3>
        	<p>商品详情商品详情商品详情商品详情</p>
            <p><span class="fl">已售：999</span><i class="fr">￥&nbsp;123123</i></p>
        </h3>
    </div>
    
    
    <ul class="srtx mt15">
        <li>
            <p>购买数量</p>
            <span id="reduce" onclick="jiaJian('reduce')">-</span>
            <input id="num" type="text" value="0"/>
            <span id="add" onclick="jiaJian('add')">+</span>
        </li>
    </ul>
    <div class="proLog"><img class="fl" src="uploadfile/loga.jpg" /><p class="fr">方和堂</p></div>
    
    <div id="navCont">
        <!-- 导航 -->
        <div id="nav" class="clearfix">
            <ul class="navs list5">
                <li><h2 class="cur">详情</h2></li>
                <li><h2>规格</h2></li>
                <li><h2>评价</h2></li>
            </ul>
        </div>
        <!-- 导航 -->
        <!-- 内容 -->
        <div id="cont" class="clearfix">
            <div class="switchCont" style=" display:block;">
               	<div class="about" style=" padding:10px 0;">
                    <p><img src="uploadfile/img.jpg" /></p>
                    <p>专用代码调试工具专用代码调试工具专用代码调试工具专用专用代码调试工具专用代码调试工具专用代码调试工具专用专用代码调试工具专用代码调试工具专用代码调试工具专用</p>
                </div>
            </div>
            <div class="switchCont">
               
            </div>
            <div class="switchCont">
            	<form>
                    <label class="fl">评论：</label><input class="text fl" type="text" placeholder="请输入邀请码" />
                    <input class="submit fr" type="submit" value="确定" />
                </form>
               	<ul class="comment">
                    <li class="title">评价（0）</li>
                    <li>
                        <h5 class="mt15" >
                            <em><img src="" alt="" /></em>
                            <a href="#" title="" class="Pop">
                                <p><i>用户名十个字啊啊啊啊</i><time>9月3日  23：05</time></p>
                                <span>评论内容评论内容</span>
                            </a>
                        </h5>
                        <ol>
                            <li>
                                <h5>
                                    <p><i><a href="#" title="">用户名</a> 回复 用户名：</i><time>9月3日  23：05</time></p>
                                    <span>评论内容评论内容</span>
                                </h5>
                            </li>
                            <li>
                                <h5>
                                    <p><i>用户名 回复 用户名：</i><time>9月3日  23：05</time></p>
                                    <span>评论内容评论内容</span>
                                </h5>
                            </li>
                        </ol>
                    </li>
                    <li class="bt0">
                        <h5 class="mt15">
                            <em><img src="" alt="" /></em>
                            <a href="#" title="" class="Pop">
                                <p><i>用户名十个字啊啊啊啊</i><time>9月3日  23：05</time></p>
                                <span>评论内容评论内容</span>
                            </a>
                        </h5>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 内容 -->
    </div>
</div>
<!-- 内容切换 -->

<!-- 底部 -->
<div id="foot" class="clearfix">
	<div class="foot_a">
        <a href="#" class="jrgwc">加入购物车</a>
        <a href="#" class="ljgm">立即购买</a>
    </div>
</div>
<!-- 底部 -->

<div id="Popup">
	<div id="PopupBg"></div>
    <div id="PopupCt">
        <form>
        	<label class="CtText2">回复：<i>sadjs</i></label>
            <input class="CtText" type="text" placeholder="请输入邀请码" />
            <input class="submit" type="submit" value="确定" />
        </form>
    </div>
</div>

<!-- javascript -->
<script type="text/javascript">
//弹出框
$(".Pop").click(function(){
	$("#Popup").fadeIn(300);
})
$(".submit").click(function(){
	$("#Popup").fadeOut(300);
})
$("#PopupBg").click(function(){
	$("#Popup").fadeOut(300);
})

$(document).ready(function(){
	//  点击切换
	$dragBln = false;
	$(".main_image").touchSlider({
		flexible : true,
		speed : 300,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e){
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	// 自动轮换
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 3000);
	$(".main_visual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},3000);
	});
	$(".main_image").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 3000);
	});
});


//列表切换
var oTab=document.getElementById("navCont");
var aH3=oTab.getElementsByTagName("h2");
var aDiv=document.getElementsByClassName("switchCont");
for(var i=0;i<aH3.length;i++){ 
   aH3[i].index=i;
   aH3[i].onclick=function(){
   for(var i=0;i<aH3.length;i++){
   aH3[i].className="";
   aDiv[i].style.display="none";
   }
   this.className="cur";
   aDiv[this.index].style.display="block";
   }
}


function jiaJian(kind){
	var oNum=document.getElementById('num');
	var numValue=oNum.value;
	//alert(numValue);
	if(kind==='add'){
		numValue++;
	}else if(kind==='reduce'){
		if(numValue>0)numValue--;
	}
	oNum.value=numValue;
}
</script>
<!-- javascript -->
</body>
</html>
